<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!--<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />-->
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
       <script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/jquery.cookie.js" type="text/javascript"></script>
       <script type="text/javascript">
//     $(function() {
//     	$.ajax({
//						type:"post",
//						url:"http://localhost:9095/admin/eduUser/list",
//						headers:{
//							"token2": $.cookie("token2")
//						},
//						async:true,
//						success(response){
//					_this.sysSubject = response.data;
//					_this.pageArr = _this.sysSubject; //数据长度
//					_this.totalPage = Math.ceil(_this.pageArr.length / 15) //总页数
//					_this.first();
//						}
//					});
//     	
//				$.post("http://localhost:9095/admin/eduUser/list",function(msg){
//					console.log(msg);
//					if(msg.data.length>0){
//						msg.data.forEach(function(item) {
//							change(item);
//						});
//					}
//				});
//				});
				
       </script>
    </head>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15" id="app">
                <div class="layui-col-md12">
                    <div class="layui-card">
                       
                       
                        <div class="layui-card-body ">
                            <table class="layui-table layui-form">
                              <thead>
                                <tr>
                                 
                                  <th>电话</th>
                                  <th>姓名</th>
                                  <th>性别</th>
                                  <th>年龄</th>
                                  <th>注册时间</th>
                                 
                              </thead>
                             <tr v-for="(obj, index) in pageArr">
										<td> {{ obj.userId }} </td>
										<td> {{ obj.mobile }} </td>
										<td> {{ obj.userName }} </td>
										<td> {{ obj.age }} </td>
										<td> {{ obj.createTime }} </td>
									</tr>
                            </table>
                        </div>
                        <div class="layui-card-body ">
                            <div class="page">
                                <div>
                                  <a class="prev" href="">&lt;&lt;</a>
                                  <a class="num" href="">1</a>
                                  <span class="current">2</span>
                                  <a class="num" href="">3</a>
                                  <a class="num" href="">489</a>
                                  <a class="next" href="">&gt;&gt;</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </body>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
	<!--引入Vue的js 开发环境版本., 包含了有帮助的命令行警告-->
	<script src="./js/vue.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script src="js/pageHelp.js"></script>
    <script>
    	var rid = $.cookie("rId");
		const app = new Vue({
			el: "#app",
			data: { //数据
				sysSubject: [],
				page: 1, //当前页
				totalPage: 0, //总页数
				pageArr: [] //中间值，循环所用的数据
			},
			methods: { //事件方法
				//首页
					first: function() {
						this.page = 1;
						this.pageArr = pageHelp(this.sysSubject, 15, 1);
					},
					//上一页
					last: function() {
						this.page = this.page - 1;
						if(this.page <= 1) {
							layer.msg("已经第一页了")
							this.page=1;
						}
						this.pageArr = pageHelp(this.sysSubject, 15, this.page);
					},
					//下一页
					next: function() {
						this.page = this.page + 1;
						console.log(this.page)
						if(this.page >= this.totalPage) {
						layer.msg("已经最后一页了")
							this.page=this.totalPage;
						}
						this.pageArr = pageHelp(this.sysSubject,15, this.page);
					},
					//末页
					end: function() {
						this.page = this.totalPage;
						this.pageArr = pageHelp(this.sysSubject, 15, this.totalPage)
					},
					
					//跳转页面
					tz: function() {
						var num=$("#num").val();
						if(num>this.totalPage||num<1){
						layer.msg("请输入正确的页数")	
						$("#num").val("");
						
						}
						this.pageArr = pageHelp(this.sysSubject, 15, num)
						$("#num").val("");
					},
			},
			created() { //页面加载
				let _this = this;
					$.ajax({
						type:"post",
						url:"http://localhost:9095/admin/eduUser/list",
						headers:{
							"token2": $.cookie("token2")
						},
						async:true,
						success(response){
					_this.sysSubject = response.data;
					_this.pageArr = _this.sysSubject; //数据长度
					_this.totalPage = Math.ceil(_this.pageArr.length / 15) //总页数
					_this.first();
						}
					});
			}

		})
      </script>
</html>